<template>
  <div class="body">
    <!-- Header -->
    <header>
      <h1>学生画像系统</h1>
      <h3>{{ selectedClassName }}</h3>
      <div class="showTime">{{ currentTime }}</div>
    </header>

    <!-- Score Section -->
    <!-- <section class="no">
      <div class="no-hd">
        <ul>
          <li>96.1</li>
          <li>19.7</li>
          <li>15.0</li>
          <li>16.5</li>
          <li>18.9</li>
        </ul>
      </div>
      <div class="no-bd">
        <ul>
          <li>综合评分(100分)</li>
          <li>品德素养(40分)</li>
          <li>学业课程(20分)</li>
          <li>身心健康(20分)</li>
          <li>课外实践(20分)</li>
        </ul>
      </div>
    </section> -->

    <!-- Main Content Section -->
    <section class="mainbox">
      <div class="column">
        <div class="panel">
          <h2>个人成绩分布</h2>
          <gradeDistribution :selected-student-id="selectedStudentId" class="chart"></gradeDistribution>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>加权成绩排名</h2>
          <weightedScoreRank :selected-student-id="selectedStudentId" class="chart"></weightedScoreRank>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>图书借阅次数</h2>
          <lbLonasNumber :selected-student-id="selectedStudentId" class="chart"></lbLonasNumber>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>图书馆学习时长</h2>
          <lbLonasNumber :selected-student-id="selectedStudentId" class="chart"></lbLonasNumber>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>食堂消费</h2>
          <lbLonasNumber :selected-student-id="selectedStudentId" class="chart"></lbLonasNumber>
          <div class="panel-footer"></div>
        </div>
      </div>

      <div class="column">
        <div class="panelperson">
          <person :selected-student-id="selectedStudentId" class="chart"></person>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>课程门数 (门)</h2>
          <coursesNumber :selected-student-id="selectedStudentId" class="chart"></coursesNumber>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>图书借阅数量</h2>
          <booksBroNumber :selected-student-id="selectedStudentId" class="chart"></booksBroNumber>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>奖学金-历史资助信息</h2>
          <scholarship :selected-student-id="selectedStudentId" class="chart"></scholarship>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>超市消费</h2>
          <booksBroNumber :selected-student-id="selectedStudentId" class="chart"></booksBroNumber>
          <div class="panel-footer"></div>
        </div>
      </div>

      <div class="column">
        <div class="panel">
          <h2>已修/应修学分</h2>
          <creditHour :selected-student-id="selectedStudentId" class="chart"></creditHour>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>加权成绩</h2>
          <weightedScore :selected-student-id="selectedStudentId" class="chart"></weightedScore>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>图书馆进入次数</h2>
          <lbIoNumber :selected-student-id="selectedStudentId" class="chart"></lbIoNumber>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>助学金-历史资助信息</h2>
          <stipend :selected-student-id="selectedStudentId" class="chart"></stipend>
          <div class="panel-footer"></div>
        </div>
        <div class="panel">
          <h2>个人词云</h2>
          <worldCloud :selected-student-id="selectedStudentId" class="chart"></worldCloud>
          <div class="panel-footer"></div>
        </div>
      </div>
    </section>

    <!-- 分析卡片区域 -->
    <section class="analysis-cards-section">
      <div class="analysis-card">
        <h2>职业发展预测</h2>
        <CareerPredictionCard class="analysis-chart" />
      </div>
      <div class="analysis-card">
        <h2>跨学科能力分析</h2>
        <InterdisciplinaryCard class="analysis-chart" />
      </div>
      <div class="analysis-card">
        <h2>社交网络分析</h2>
        <SocialNetworkCard class="analysis-chart" />
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import gradeDistribution from './lables/gradeDistribution.vue'
import creditHour from './lables/creditHour.vue';
import weightedScoreRank from './lables/weightedScoreRank.vue';
import coursesNumber from './lables/coursesNumber.vue';
import weightedScore from './lables/weightedScore.vue';
import booksBroNumber from './lables/booksBroNumber.vue';
import lbIoNumber from './lables/lbIoNumber.vue';
import lbLonasNumber from './lables/lbLonasNumber.vue';
import worldCloud from './lables/worldCloud.vue';
import person from './lables/person.vue';
import scholarship from './lables/scholarship.vue';
import stipend from './lables/stipend.vue';
import CareerPredictionCard from '../../profileCards/CareerPredictionCard.vue';
import InterdisciplinaryCard from '../../profileCards/InterdisciplinaryCard.vue';
import SocialNetworkCard from '../../profileCards/SocialNetworkCard.vue';

const props = defineProps({
  selectedStudentId: {
    type: Number,
    required: false,
    default: null,
  },
  selectedClassName: {
    type: String,
    required: false,
    default: '',
  },
});

// 当前时间更新
const currentTime = ref("");
const updateTime = () => {
  const dt = new Date();
  currentTime.value = `当前时间：${dt.getFullYear()}年${dt.getMonth() + 1}月${dt.getDate()}日 ${dt.getHours()}时${dt.getMinutes()}分${dt.getSeconds()}秒`;
};

onMounted(() => {
  updateTime();
  setInterval(updateTime, 1000)

});

</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border-radius: 4px;
}

li {
  list-style: none;
}

// 字体定义
@font-face {
  font-family: electronicFont;
  src: url("/font/DS-DIGIT.TTF");
}

body {
  background: url("src/assets/profilePage/bg.png") top center;
  background-size: 100% 100%;
  line-height: 1.15;
}

header {
  position: relative;
  height: 6.25rem;
  background: url("src/assets/profilePage/head_bg.png") no-repeat;
  background-size: 100% 100%;

  h1 {
    font-size: 2.375rem;
    color: #fff;
    text-align: center;
    line-height: 5rem;
  }

  h3,
  .showTime {
    position: absolute;
    top: 0;
    line-height: 4.6875rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.25rem;
  }

  h3 {
    left: 1.875rem;
  }

  .showTime {
    right: 1.875rem;
  }
}

.no {
  background: rgba(101, 132, 226, 0.1);
  padding: 0.1875rem;

  .no-hd {
    position: relative;
    border: 1px solid rgba(25, 186, 139, 0.17);

    ul {
      display: flex;

      li {
        flex: 1;
        line-height: 3rem;
        font-size: 2.8rem;
        color: #ffeb7b;
        text-align: center;
        font-family: "electronicFont";

        &:after {
          content: "";
          position: absolute;
          top: 25%;
          right: 0;
          height: 50%;
          width: 1px;
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }

    &:before,
    &:after {
      content: "";
      position: absolute;
      width: 30px;
      height: 10px;
      border: 2px solid #02a6b5;
    }

    &:before {
      top: 0;
      left: 0;
      border-right: none;
      border-bottom: none;
    }

    &:after {
      bottom: 0;
      right: 0;
      border-left: none;
      border-top: none;
    }
  }

  .no-bd ul {
    display: flex;

    li {
      flex: 1;
      text-align: center;
      color: rgba(255, 255, 255, 0.7);
      font-size: 1.125rem;
      height: 1.6rem;
      line-height: 0.5rem;
      padding-top: 0.625rem;
    }
  }
}

.mainbox {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0.125rem 0.125rem 0;
  min-height: 100vh;
  background: url("src/assets/profilePage/bg.png") top center;
  background-size: 100% 100%;
  background-attachment: fixed;

  .column {
    flex: 3;
    display: flex;
    flex-direction: column;

    &:nth-child(2) {
      margin: 0 0.5rem 0.1875rem;
      overflow: hidden;
    }

    &:nth-child(1),
    &:nth-child(3) {
      margin: 0 0 0;
      overflow: hidden;
    }
  }

  .panel {
    position: relative;
    height: 350px;
    padding: 0 15px 40px;
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.04);

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    h2 {
      height: 48px;
      line-height: 48px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      font-weight: 400;
      margin-bottom: 15px;
    }

    .chart {
      height: calc(100% - 48px);
      padding: 15px;
    }

    .panel-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;

      &::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }
    }
  }

  .panelperson {
    position: relative;
    height: 350px;
    padding: 0 15px 40px;
    border: 1px solid rgba(25, 186, 139, 0.17);
    margin-bottom: 15px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    .column {
      flex: 2;

      &:nth-child(1) {
        margin-top: 0.5rem;
        flex: 1;
        overflow: hidden;
      }
    }

    .panel-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
    }

    .info-section {
      margin-bottom: 10px;
    }

    .cloud {
      position: relative;
      height: 120px;
      width: 100%;
      margin-top: auto;
    }

    .panel-footer {
      margin-top: auto;
      height: auto;
      padding: 10px;

      &::before {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 10px;
        height: 10px;
        border-left: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      &::after {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-right: 2px solid #02a6b5;
        border-bottom: 2px solid #02a6b5;
        content: "";
      }

      .Himg {
        max-width: 2rem;
        height: 1.8rem;
        margin-top: 0;
      }

      .Hfont {
        color: #ff0000;
        line-height: 1rem;
        font-size: 0.9rem;
        margin-top: 0.3rem;
        padding-inline-start: 0.8rem;
      }
    }
  }
}

.analysis-cards-section {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 15px;
  padding: 0;
  position: relative;

  &::before {
    display: none;
  }

  .analysis-card {
    flex: 1;
    position: relative;
    height: 350px;
    padding: 0 15px 40px;
    border: 1px solid rgba(25, 186, 139, 0.17);
    background: rgba(255, 255, 255, 0.04);
    overflow: hidden;

    &::before {
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-left: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-right: 2px solid #02a6b5;
      border-top: 2px solid #02a6b5;
      content: "";
    }

    h2 {
      height: 48px;
      line-height: 48px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      font-weight: 400;
      margin-bottom: 15px;
    }

    .analysis-chart {
      height: calc(100% - 48px);
      padding: 15px;
      overflow: auto;
    }

    &:hover {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}
</style>